<template>
  <el-tabs type="border-card" closable @tab-remove="removeTab" v-model="editableTabsValue" @tab-click="clickTab">
    <el-tab-pane v-for="(item,index) in editableTabs" :key="item.name" :label="item.title" :name="item.name">
    <span slot="label"><i :class="item.icon"></i>{{ item.title }}</span>  
    <router-view></router-view>
    </el-tab-pane>
    <div v-if="$route.meta.shovalues">
    <el-row :gutter="20" >
  <el-col :span="6">
    <div class="statistics">
      <i class="el-icon-user-solid" style="font-size: 50px;color:royalblue;-webkit-text-stroke:3px #000; margin-top: 45px;margin-left: 20px;"></i>
      <h2 style="font-size: 20px;margin-left: 80px;margin-top: -50px;">人员</h2>
      <h2 style="font-size: 15px;margin-left: 80px;margin-top: -18px;font-weight: 400;">prople</h2>
      <h2 style="font-size: 23px;margin-left: 170px;margin-top: -80px;">人数统计</h2>
      <h2 style="font-size: 40px;margin-left: 200px;margin-top: -8px;">7</h2>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="statistics">
      <i class="el-icon-video-camera-solid" style="font-size: 50px;color:royalblue;-webkit-text-stroke:3px #000; margin-top: 45px;margin-left: 20px;"></i>
      <h2 style="font-size: 20px;margin-left: 80px;margin-top: -50px;">电影</h2>
      <h2 style="font-size: 15px;margin-left: 80px;margin-top: -18px;font-weight: 400;">movie</h2>
      <h2 style="font-size: 23px;margin-left: 170px;margin-top: -80px;">电影统计</h2>
      <h2 style="font-size: 40px;margin-left: 200px;margin-top: -8px;">18</h2>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="statistics">
      <i class="el-icon-s-ticket" style="font-size: 50px;color:royalblue;-webkit-text-stroke:3px #000; margin-top: 45px;margin-left: 20px;"></i>
      <h2 style="font-size: 20px;margin-left: 80px;margin-top: -50px;">消费</h2>
      <h2 style="font-size: 15px;margin-left: 80px;margin-top: -18px;font-weight: 400;">consume</h2>
      <h2 style="font-size: 23px;margin-left: 170px;margin-top: -80px;">消费统计</h2>
      <h2 style="font-size: 40px;margin-left: 170px;margin-top: -8px;">3660</h2>
    </div>
  </el-col>
  <el-col :span="6">
    <div class="statistics">
      <i class="el-icon-s-order" style="font-size: 50px;color:royalblue;-webkit-text-stroke:3px #000; margin-top: 45px;margin-left: 20px;"></i>
      <h2 style="font-size: 20px;margin-left: 80px;margin-top: -50px;">订单</h2>
      <h2 style="font-size: 15px;margin-left: 80px;margin-top: -18px;font-weight: 400;">orders</h2>
      <h2 style="font-size: 23px;margin-left: 170px;margin-top: -80px;">订单统计</h2>
      <h2 style="font-size: 40px;margin-left: 200px;margin-top: -8px;">78</h2>
    </div>
  </el-col>
  </el-row>
</div>
  </el-tabs>
</template>

<script>
export default {
    name:'Tabs',
  data() {
    return {
    }
  },
  methods:{
    clickTab(target){
      this.$router.push({name:target.name})
    },
     removeTab(target){
       let tabsArray= this.editableTabs;
       let activeName=this.editableTabsValue;  //获得目前正被激活的选项卡的name
       if(target==='Index'){
        return
       }
       if(target===activeName){
        tabsArray.forEach((tabitem,index)=>{
          if(tabitem.name===target){
            let nextTab=tabsArray[index+1] || tabsArray[index-1]
            if(nextTab){
                activeName=nextTab.name
            }
          }
        });
    }
        //将找到的下一个被激活的选项卡name赋值给vuex
        this.editableTabsValue=activeName
        //从现有数组中移除删掉的选项卡,filter过滤
        this.editableTabs= tabsArray.filter(tab=>tab.name!==target)
        //选项卡改变页面内容也改变
        this.$router.push({name:activeName})
     }
  },
  computed:{
    editableTabs:{
        get(){
        return this.$store.state.menu.editableTabs
        },
        set(val){
          this.$store.state.menu.editableTabs=val
        },
    },
    editableTabsValue:{
        get(){
            return this.$store.state.menu.editableTabsValue
        },
        set(val){
            this.$store.state.menu.editableTabsValue=val
        }
    }
  }
}
</script>

<style scoped>
.el-tabs{
    height: 100%;
}
 .statistics{
  background-color:#fff;
  height: 150px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  border-radius: 4px;
 }

</style>
